<template>
  <dv-border-box1 style="background-size: cover;" :color="['#ffeca8', 'gold']" :class="isFullScreen?'fullscreen-div':''"
                  class="back" ref="borderRef">
    <div
        style="width: 100%;height: 100%;background-size: cover;display: flex;flex-direction: column;">
      <div
          style="font-size: 32px;color: gold;margin-top: 16px;text-align: center;display: flex;flex-direction: row;padding: 0px 32px">

        <div style="display: flex;flex-direction: column;flex: 1;align-items: center">
          <span style="justify-self: center;font-size: 44px">{{ userStore.race.name }}</span>

          <dv-decoration-5 :color="['#ff793e', '#ff793e']" style="width:1400px;height:64px;margin-top: -20px"/>
          <img @click="playLive" style="width: 80px;position: absolute;left: 64px;top:16px;border-radius: 50%"
               src="../../../assets/images/云南省教指委.jpg">

          <img @click="open=true" style="width: 80px;position: absolute;right: 64px;top:16px;border-radius: 50%"
               src="../../../assets/images/鹤庆.jpg">
        </div>

        <!--        <audio loop style="display: none" ref="audioPlayer" :src="warning_play_audio" controls></audio>-->

        <!--        <audio style="display: none" ref="audioPlayer2" :src="onlotterySrc" controls></audio>-->


        <ExpandOutlined v-if="!isFullScreen" @click="fullScreen" style="font-size: 18px"/>

        <CompressOutlined v-else @click="exitFullScreen" style="font-size: 18px"/>
      </div>


      <div style="flex: 1;padding: 32px 120px">

        <div class="border"
             style="width: 100%;height: 100%;padding:16px 16px;box-sizing: border-box;display: flex;background-size: 100% 100%; /* 背景图片覆盖整个元素 */background-repeat: no-repeat; /* 背景图片不重复 */background-position: center; display: flex;flex-direction: column;align-items: center;justify-content: space-around;color: #ffeca8;">
          <div style="font-size: 200px" v-if="showInfo==null">
            {{subName}}
          </div>
          <div style="flex: 1;display: flex;flex-direction: column" v-else>
            <div style="font-size: 120px;flex: 1">项目：{{ showInfo.subName }}</div>
            <div style="font-size: 200px;flex: 1">序号：{{ showInfo.no }}号</div>
            <div v-if="false" style="font-size: 200px;flex: 1">
              {{ showInfo.objectType == 1 ? '姓名' : '单位' }}：{{ showInfo.name }}
            </div>
            <div v-if="showInfo.type=='ready'" style="font-size: 180px;flex: 1"></div>
            <div v-if="showInfo.type=='stuScore' && showInfo.score!=null" style="font-size: 200px;flex: 1">{{ showInfo.score }}分</div>
          </div>

        </div>
      </div>
    </div>
  </dv-border-box1>

  <a-modal centered v-model:open="open">
    <a-input v-model:value="subName"></a-input>
  </a-modal>
</template>

<script>
import ElementResizeDetector from 'element-resize-detector';
import useUserStore from "@/store/modules/user.js";
import moment from "moment/moment.js";
import {getReadyStu} from "@/api/business/score";
import {deptTreeSelect} from "@/api/business/subject.js";

export default {
  name: "Index",
  data() {
    const userStore = useUserStore()
    const channel = new BroadcastChannel('enterScore');
    return {
      url: window.location.host + ":8080",
      userId: userStore.id,
      isFullScreen: false,
      userStore,
      timeText: '2024-23',
      channel,
      showInfo: null,
      subName:'队列队形',
      open:true,
    }
  },
  mounted() {
    this.fullScreen();
    this.createSocket();
    let that = this;
    setInterval(() => {
      that.timeText = moment(new Date()).format("YYYY年MM月DD日 HH:mm:ss");
    }, 1000)
    // this.channel.addEventListener('message', event => {
    //   const message = event.data;
    //
    //   if (message.type == 'stuReady' || message.type == 'score') {
    //     that.showInfo = message;
    //   }
    //   console.log(message)
    // });

  },
  methods: {
    fullScreen() {
      this.isFullScreen = true;
    },
    exitFullScreen() {
      this.isFullScreen = false;
    },
    createSocket: function () {
      let that = this;
      console.info(this.url)
      that.websocket = null;
      /* 获取主机地址和端口号 */
      //判断当前浏览器是否支持WebSocket
      if ('WebSocket' in window) {
        if (that.userId == null) {
          console.error("userId不能为空");
          that.$message.error("userId不能为空")
          return;
        }
        that.websocket = new WebSocket("wss://" + this.url + "/underBaseGameApi/webSocket/" + that.userId);
      } else {
        console.error("当前游览器不支持webSocket!");
      }
      that.websocket.onerror = function () {
        that.$message.error("连接错误")
        console.error("连接错误!");
        reconnect();
      };
      //连接关闭
      that.websocket.onclose = function () {
        reconnect();
      };
      //连接成功
      that.websocket.onopen = function () {
        that.$message.success("连接成功")
        heartCheck.start();
      }
      //收到数据
      that.websocket.onmessage = function (event) {
        let obj = JSON.parse(event.data);
        console.log(obj)
        if(obj.type == 'stuReady' || obj.type == 'stuScore'){
          obj = JSON.parse(obj.message);
          console.log(that.showInfo)
          if (obj.type == "stuReady" || obj.type == 'stuScore') {
            that.showInfo = obj;
            console.log(that.showInfo)
            setTimeout(()=>{
              that.showInfo = null;
            },10000)
          }
        }

        heartCheck.reset();      //拿到任何消息都说明当前连接是正常的
      }

      function reconnect() {
        if (reconnect.lockReconnect) return;
        reconnect.lockReconnect = true;
        setTimeout(function () {     //没连接上会一直重连，设置延迟避免请求过多
          that.createSocket();
          reconnect.lockReconnect = false;
        }, 3000);
      }

      let heartCheck = {
        timeout: 15000,//20min
        timeoutObj: null,
        reset: function () {
          clearTimeout(this.timeoutObj);
          this.start();
        },
        start: function () {
          this.timeoutObj = setTimeout(function () {
            // websocket.send("heart");
          }, this.timeout)
        }
      }
    },
  }
}
</script>

<style>
.back {
  background-image: url('../../../assets/images/lotterybk.jpg')
}

.fullscreen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.border {
  background-image: url('../../../assets/images/border.png')
}
</style>